<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String clientCookie = request.getHeader("Cookie");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Web截屏控件2演示界面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="Stylesheet" href="zyCapture/skygqbox.css" />
    <script type="text/javascript" src="zyCapture/jquery-1.7.2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyCapture/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyCapture/skygqbox.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyCapture/scp.js" charset="utf-8"></script>
    <script type="text/javascript" src="vue.min.js" charset="utf-8"></script>
</head>
<body>
    <div id="msg"></div>	
	<div id="vue-scp">
        <scp2 ref="scp"></scp2>
		<input ref="Capture" type="button" value="截取屏幕区域" />
        <input ref="Capture2" type="button" value="截屏时隐藏当前窗口" />
        <input ref="Capture3" type="button" value="截取全屏" />
        <input ref="Capture4" type="button" value="截取指定区域" />
		<img ref="img" alt="截屏图片" style="display: none" />
	</div>
	<script type="text/javascript" language="javascript">
		//定义组件
        Vue.component('scp2', {
            data() {return {app: null}},
            props: {},
            mounted() {
            	//根路径：http://localhost/api/scp/
                var pos = window.location.href.lastIndexOf("/");
                var api = [
                    window.location.href.substr(0, pos + 1),
                    "upload.jsp"
                ].join("");
				
				this.app = zyCapture.getInstance({
                    config: {
						PostUrl: api,
						Cookie: '<%=clientCookie%>',
						Fields: { uname: "test" }
					}					
                });
            },
            methods: {},
            destroyed(){},
            template: '<div id="scp"></div>'
        });

        //创建vue对象
        var ue = new Vue({
            el: '#vue-scp',
            data: {}
            , methods: {
                post_complete: function (src) {
                    $(this.$refs.img).attr("src",src + "?t=" + new Date().getTime() );
                    $(this.$refs.img).show();
                }
            }
            , mounted: function () {
                var app = this.$refs.scp.app;
                app.event.postComplete = this.post_complete;
                $(this.$refs.Capture).click(function () { app.Capture(); });
                $(this.$refs.Capture2).click(function () { app.CaptureHide(); });
                $(this.$refs.Capture3).click(function () { app.CaptureScreen(); });
		        $(this.$refs.Capture4).click(function () { app.CaptureRect(0, 0, 100, 100); });
            }
        });
	</script>
</body>
</html>